<template>
	<view>
		<view class="container">
			<view class="m-hairline--bottom foot-line"></view>
			<!-- <image class="m-backdrop" src="/static/icon/icon_back4.png" mode="widthFix"></image> -->
			<view class="m-header">
				<image class="m-backdrop" src="/static/icon/icon_back4.png" mode="widthFix"></image>
				<view class="g-custom-nav flex-box flex-center plr30" :style="{ paddingTop: statusBarHeight + 'px', height: 'calc(90rpx + ' + statusBarHeight + 'px)' }">
					<view class="col-f fs36">我的</view>
				</view>
			</view>

			<view class="main pr" :style="{ paddingTop: 'calc(90rpx + ' + statusBarHeight + 'px)' }">
				<view class="mine-wrap">
					<image class="mine-bg" src="/static/icon/icon_back4.png" mode="aspectFill"></image>
					<view class="mine-inner">
						<view class="user-box pr flex-box ptb35 plr30 mb5">
							<image @click="navigation('/pages/basic_info/basic_info', 1)" class="mr20 img-head" :src="userinfo.avatar ? userinfo.avatar : ''" mode="aspectFill"></image>
							<view class="flex-1">
								<view class="flex-box mb10">
									<view class="flex-box flex-1" @click="navigation('/pages/basic_info/basic_info', 1)">
										<view class="name fs32 col-f mr15 fwb m-ellipsis">{{ userinfo.nickname ? userinfo.nickname : '请登录' }}</view>

										<view class="vip mr15 tc" v-if="userinfo.vip_status">vip会员</view>
										<!-- <image v-for="item in 3" class="icon-star mr5" src="/static/icon/icon_star.png" mode="aspectFit"></image> -->
									</view>
									<!-- 点:active-dot -->
									<view class="icon-box" :class="{'active-dot': userinfo.message_count>0}" @click="navigation('/pages/notification/notification', 1)" hover-class="none">
										<image class="icon1" src="/static/icon/icon_news.png" mode="aspectFit"></image>
									</view>
									<navigator class="ml10 icon-box" url="/pages/setting/setting" hover-class="none">
										<image class="icon1" src="/static/icon/icon_set.png" mode="aspectFit"></image>
									</navigator>
								</view>
								<view class="fs24 col-f">{{ userinfo.mobile ? userinfo.mobile : '请登录' }}</view>
							</view>
						</view>

						<view class="data-row pr flex-box plr30 col-f tc">
							<view class="flex-1" @click="navigation('/pages/money_record/money_record', 1)">
								<view class="fs36 mb10">{{ userinfo.account ? userinfo.account.money : '0.00' }}</view>
								<view class="fs24">余额</view>
							</view>
							<view class="flex-1" @click="navigation('/pages/points/points', 1)">
								<view class="fs36 mb10">{{ userinfo.score ? userinfo.score : 0 }}</view>
								<view class="fs24">积分</view>
							</view>
							<view class="flex-1" @click="navigation('/pages/achievement/achievement', 1)">
								<view class="fs36 mb10">0</view>
								<view class="fs24">学习成就</view>
							</view>
							<view class="flex-1" @click="navigation('/pages/coupon/coupon', 1)">
								<view class="fs36 mb10">{{ userinfo.coupon_count ? userinfo.coupon_count : 0 }}</view>
								<view class="fs24">优惠券</view>
							</view>
							<!-- <view class="flex-1" @click="navigation('/pages/footprint/footprint', 1)">
								<view class="fs36 mb10">{{ userinfo.footer_count ? userinfo.footer_count : 0 }}</view>
								<view class="fs24">足迹</view>
							</view> -->
						</view>

						<view class="vip-box mlr30" @click="navigation('/pages/vip/vip', 1)">
							<image class="img-vip-bg" src="/static/icon/img_vip.png" mode="aspectFill"></image>
							<view class="abso-box plr25 flex-box">
								<image class="icon-vip mr20" src="/static/icon/icon_vip1.png" mode="aspectFit"></image>
								<view class="flex-1 24 text" v-if="!userinfo.vip_status">给你1个学习的平台</view>
								<view v-if="!userinfo.vip_status" class="nav-vip flex-box flex-center" url="/pages/vip/vip" hover-class="none">
									<view class="fs24 col-3 mr5">成为会员</view>
									<image class="icon-trigle" src="/static/icon/icon_trigle.png" mode="aspectFit"></image>
								</view>
								<view v-if="userinfo.vip_status" class="flex-1 24 text tr">有效期至：{{ userinfo.user_vip.expire_time_text }}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="nav-box">
					<view class="fs36 col-black pb30 mb40 m-hairline--bottom">我的课程</view>
					<view class="nav-list mb10 flex flex-align-start flex-wrap tc">
						<view class="nav-item w25" @click="navigation('/pages/my_orders/my_orders', 1)">
							<image class="icon" src="/static/icon/icon_nav1.png" mode="aspectFit"></image>
							<view>线上课程</view>
						</view>
						<view class="nav-item w25" @click="navigation('/pages/offline_orders/offline_orders?tab1Idx=-1', 1)">
							<image class="icon" src="/static/icon/icon_nav2.png" mode="aspectFit"></image>
							<view>线下课程</view>
						</view>
						<view class="nav-item w25" @click="navigation('/pages/offline_orders/offline_orders?tab1Idx=2', 1)">
							<image class="icon" src="/static/icon/icon_nav20.png" mode="aspectFit"></image>
							<view>退款</view>
						</view>
						<view class="nav-item w25" @click="navigation('/pages/my_course/my_course', 1)">
							<image class="icon" src="/static/icon/icon_nav19.png" mode="aspectFit"></image>
							<view>收藏</view>
						</view>
					</view>
					<!--  -->
					<view class="fs36 col-black pb30 mb40 m-hairline--bottom">我的服务</view>
					<view class="nav-list mb10 flex flex-align-start flex-wrap tc">
						<view class="nav-item w25" @click="navigation('/pages/points/points', 1)" hover-class="none">
							<image class="icon" src="/static/icon/icon_nav5.png" mode="aspectFit"></image>
							<view>签到</view>
						</view>
						<view class="nav-item w25" @click="navigation('/pages/points/points', 1)" hover-class="none">
							<image class="icon" src="/static/icon/icon_nav6.png" mode="aspectFit"></image>
							<view>我的积分</view>
						</view>
						<view class="nav-item w25" @click="navigation('/pages/footprint/footprint', 1)" >
							<image class="icon" src="/static/icon/icon_nav7.png" mode="aspectFit"></image>
							<view>我的足迹</view>
						</view>
						
						<view class="nav-item w25" @click="navigation('/pages/money_record/money_record', 1)">
							<image class="icon" src="/static/icon/icon_nav21.png" mode="aspectFit"></image>
							<view>我的佣金</view>
						</view>
						<view class="nav-item w25" @click="navigation('/pages/my_team/my_team', 1)">
							<image class="icon" src="/static/icon/icon_nav22.png" mode="aspectFit"></image>
							<view>我的团队</view>
						</view>
						
						<view class="nav-item w25" @click="navigation('/pages/achievement/achievement', 1)">
							<image class="icon" src="/static/icon/icon_nav8.png" mode="aspectFit"></image>
							<view>学习记录</view>
						</view>
						<!-- <view class="nav-item w25" hover-class="none">
							<image class="icon" src="/static/icon/icon_nav9.png" mode="aspectFit"></image>
							<view>我的课程</view>
						</view> -->
						<view class="nav-item w25" @click="navigation('/pages/my_comment/my_comment', 1)" hover-class="none">
							<image class="icon" src="/static/icon/icon_nav10.png" mode="aspectFit"></image>
							<view>我的评论</view>
						</view>
						<view class="nav-item w25" @click="navigation('/pages/exchange_course/exchange_course', 1)" hover-class="none">
							<image class="icon" src="/static/icon/icon_nav11.png" mode="aspectFit"></image>
							<view>学习劵</view>
						</view>
						<!-- <navigator class="nav-item w25" url="#" hover-class="none">
							<image class="icon" src="/static/icon/icon_nav12.png" mode="aspectFit"></image>
							<view>热门活动</view>
						</navigator> -->
						<!-- <navigator class="nav-item w25" url="#" hover-class="none">
							<image class="icon" src="/static/icon/icon_nav13.png" mode="aspectFit"></image>
							<view>我的报名</view>
						</navigator> -->
						<!-- <navigator class="nav-item w25" url="#" hover-class="none">
							<image class="icon" src="/static/icon/icon_nav14.png" mode="aspectFit"></image>
							<view>积分专区</view>
						</navigator> -->
						<view class="nav-item w25" @click="navigation('/pages/share_signin/share_signin', 1)">
							<image class="icon" src="/static/icon/icon_nav15.png" mode="aspectFit"></image>
							<view>分享好友</view>
						</view>
						<view class="nav-item w25" @click="navigation('/pages/help_question/help_question', 0)">
							<image class="icon" src="/static/icon/icon_nav16.png" mode="aspectFit"></image>
							<view>帮助中心</view>
						</view>
						<view class="nav-item w25" @click="navigation('/pages/feedback/feedback', 1)" hover-class="none">
							<image class="icon" src="/static/icon/icon_nav17.png" mode="aspectFit"></image>
							<view>投诉建议</view>
						</view>
						<!-- #ifdef H5 -->
						<navigator class="nav-item w25" url="/pages/my_service/my_service" hover-class="none">
							<image class="icon" src="/static/icon/icon_nav18.png" mode="aspectFit"></image>
							<view>官方热线</view>
						</navigator>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<button open-type="contact" class="nav-item w25 bg-white">
							<image class="icon" src="/static/icon/icon_nav18.png" mode="aspectFit"></image>
							<view>官方热线</view>
						</button>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userinfo: {},
			statusBarHeight: 20,
			weiDuXiaoXi:true,
			vipStatus: 1,
			platformStatus: getApp().globalData.platformStatus,
			isIos: getApp().globalData.isIos,
		};
	},
	onLoad() {
		this.statusBarHeight = getApp().globalData.statusBarHeight;
		//this.fetchConfig();
	},
	onShow() {
		if (this.$user.getUserinfo()) {
			this.fetchUserinfo();
		}else{
			this.userinfo = {}
		}
	},
	methods: {
		fetchUserinfo() {
			this.$core.get({
				url: 'xiluedu.user/info',
				data: {},
				success: ret => {
					this.userinfo = ret.data;
				},
				loading: false
			});
		},
		
		// fetchConfig() {
		// 	this.$core.get({
		// 		url: 'xiluedu.config/config',
		// 		data: {name:'shopinfo'},
		// 		success: ret => {
		// 			if(ret.data.vip_status){
		// 				this.vipStatus = ret.data.vip_status;
		// 			}
		// 		},
		// 		loading: false
		// 	});
		// },

		navigation(url, needlogin) {
			if (needlogin) {
				if (!this.$user.getUserinfo(true)) {
					return false;
				}
			}
			// #ifndef H5
			if(url == '/pages/vip/vip'){
				if(this.vipStatus == 1 && this.isIos){
					return false;
				}
			}
			// #endif
			
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style scoped>
.mine-wrap {
	position: relative;
}
.mine-wrap .mine-bg {
	display: block;
	width: 750rpx;
	height: 412rpx;
}
.mine-wrap .mine-inner {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

.user-box .img-head {
	display: block;
	width: 92rpx;
	height: 92rpx;
	border-radius: 50%;
}
.user-box .vip {
	width: 70rpx;
	height: 22rpx;
	background: linear-gradient(90deg, #d7aa4e, #f4c972);
	border-radius: 11rpx;
	font-size: 16rpx;
	font-weight: 500;
	color: #ffffff;
	line-height: 22rpx;
}
.user-box .icon-star {
	display: block;
	width: 20rpx;
	height: 20rpx;
}
.user-box .icon1 {
	display: block;
	width: 34rpx;
	height: 30rpx;
}
.user-box .name {
	max-width: 8em;
}
.user-box .icon-box {
	padding: 10rpx;
}
.user-box .icon-box.active-dot{
	position: relative;
}
.user-box .icon-box.active-dot::after{
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	width: 10rpx;
	height: 10rpx;
	border-radius: 50%;
	background-color: #fff;
}
/*  */
.vip-box {
	position: absolute;
	bottom: 0rpx;
	left: 0;
	right: 0;
	/* width: 690rpx; */
	height: 114rpx;
}
.vip-box .img-vip-bg {
	display: block;
	width: 100%;
	height: 100%;
}
.vip-box .abso-box {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding-bottom: 17rpx;
}
.vip-box .icon-vip {
	display: block;
	width: 96rpx;
	height: 30rpx;
}
.vip-box .text {
	background: linear-gradient(-43deg, #fcd671 0%, #ffeca8 51.0986328125%, #f5d791 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.vip-box .nav-vip {
	width: 151rpx;
	height: 43rpx;
	background: linear-gradient(-43deg, #fde29f, #f5d791);
	border-radius: 20rpx;
}
.vip-box .icon-trigle {
	display: block;
	width: 16rpx;
	height: 20rpx;
}

/*  */
.main {
	height: 100vh;
	overflow-y: scroll;
}
.nav-box {
	/* padding: 65rpx 64rpx 30rpx 63rpx; */
	padding: 65rpx 30rpx 30rpx;
}
/*  */
.nav-list{
	margin-left: -15rpx;
	margin-right: -15rpx;
}
.nav-list .nav-item {
	padding: 0;
	margin: 0 0 50rpx;
	width: 25%;
	border: 0;
}
.nav-list .nav-item view {
	font-size: 24rpx;
	line-height: 26rpx;
}
.nav-list .nav-item::after {
	display: none;
}
.nav-list .icon {
	margin: 0 auto 15rpx;
	display: block;
	width: 50rpx;
	height: 50rpx;
}
@media only screen and (min-width: 800px){
	.vip-box{
		height: 254rpx;
	}
	.mine-wrap .mine-bg{
		max-width: 800px;
		height: 878rpx;
	}
}
</style>
